<template>
  <div class="m-dist-box">
    <p class="m-dist-box__title" v-if="distBox">使用量Top5</p>
    <a class="m-distOne" v-if="distBox.dist1">
      <div class="m-icoOne m-ico-common">
        <span>{{distBox.dist1.split(',')[0]}}<br>{{distBox.dist1.split(',')[1]}}</span>
      </div>
    </a>
    <a class="m-distTwo" v-if="distBox.dist2">
      <div class="m-icoTwo m-ico-common">
        <span>{{distBox.dist2.split(',')[0]}}<br>{{distBox.dist2.split(',')[1]}}</span>
      </div>
    </a>
    <a class="m-distThree" v-if="distBox.dist3">
      <div class="m-icoThree m-ico-common">
        <span>{{distBox.dist3.split(',')[0]}}<br>{{distBox.dist3.split(',')[1]}}</span>
      </div>
    </a>
    <a class="m-distFour" v-if="distBox.dist4">
      <div class="m-icoFour m-ico-common">
        <span>{{distBox.dist4.split(',')[0]}}<br>{{distBox.dist4.split(',')[1]}}</span>
      </div>
    </a>
    <a class="m-distFive" v-if="distBox.dist5">
      <div class="m-icoFive m-ico-common">
        <span>{{distBox.dist5.split(',')[0]}}<br>{{distBox.dist5.split(',')[1]}}</span>
      </div>
    </a>
  </div>
</template>

<script scoped>
export default{
  props: ['distBox']
}
</script>

<style scoped></style>
